Adaptive icons   您所在的位置:网站首页 android adaptive notifications Adaptive icons  

Adaptive icons  

2024-03-23 03:47| 来源: 网络整理| 查看: 265

An adaptive icon, or AdaptiveIconDrawable, can display differently depending on individual device capabilities and user theming. Adaptive icons are primarily used by the launcher on the home screen, but they can also be used in shortcuts, the Settings app, sharing dialogs, and the overview screen.

An adaptive icon can adapt to different use cases:

Different shapes: an adaptive icon can display a variety of shapes across different device models. For example, it can display a circular shape on one OEM device, and display a squircle (a shape between a square and a circle) on another device. Each device OEM must provide a mask, which the system uses to render all adaptive icons with the same shape.

Figure 1. Adaptive icons support a variety of masks, which vary from one device to another.

Visual effects: an adaptive icon supports a variety of engaging visual effects, which display when users place or move the icon around the home screen.

Figure 2. Examples of visual effects displayed by an adaptive icon. Note: Animated visual effects are generated by supported launchers. Visual effects might vary from one launcher to another.

User theming: starting with Android 13 (API level 33), users can theme their adaptive icons. If a user enables themed app icons, by turning on the Themed icons toggle in system settings, and the launcher supports this feature, the system uses the coloring of the user's chosen wallpaper and theme to determine the tint color.

Figure 3. Adaptive icons inheriting from the user's wallpaper and themes.

In the following scenarios, the home screen doesn't display the themed app icon, and instead displays the adaptive or standard app icon:

If the user doesn't enable themed app icons. If your app doesn't provide a monochromatic app icon. If the launcher doesn't support themed app icons. Design adaptive icons

To ensure that your adaptive icon supports different shapes, visual effects, and user theming, the design must meet the following requirements:

You must provide two layers for the color version of the icon: one for the foreground, and one for the background.

Figure 4. Adaptive icons defined using foreground and background layers. The 66x66 safe zone depicted is the area that is never clipped by a shaped mask defined by an OEM. Figure 5. An example of how foreground and background layers look together with a circular mask applied.

If you want to support user theming of app icons, provide a single layer for the monochrome version of the icon.

Figure 6. A monochromatic icon layer (left) with examples of color previews (right).

Size all layers to 108x108 dp.

Use icons with clean edges. The layers must not have masks or background shadows around the outline of the icon.

Use a logo that's at least 48x48 dp. It must not exceed 66x66 dp, because the inner 66x66 dp of the icon appears within the masked viewport.

The outer 18 dp on each of the four sides of the layers is reserved for masking and to create visual effects such as parallax or pulsing.

Caution: If you don't update your launcher icon with the necessary layers, the icon neither looks consistent with other icons displayed by the system nor supports visual effects.

To learn how to create adaptive icons using Android Studio, see our Android App icon Figma template or Android Studio documentation for creating launcher icons. Also, check out the blog post Designing Adaptive Icons .

Add your adaptive icon to your app

To add an adaptive icon to your app, update the android:icon attribute in your app manifest to specify a drawable resource. You can also define an icon drawable resource using the android:roundIcon attribute, but only if you require a different icon asset for circular masks—for example, if your branding relies on a circular shape.

The following code snippet illustrates both of these attributes, but most apps only specify android:icon:

Next, in res/mipmap-anydpi-v26/ic_launcher.xml, create alternative drawable resources in your app for backward compatibility with Android 8.0 (API level 26). Use the element to define the foreground, background, and monochromatic layer drawables for your icons. The , , and inner elements support the android:drawable attribute.

The following example shows how to define , , and elements inside :

... // Starting with Android 13 (API level 33), you can opt-in to providing a // drawable. ...

You can also define drawables as elements by enclosing them in the , , and elements. The following snippet shows an example of doing this with the foreground drawable.

... ...

If you want to apply the same mask and visual effect to your shortcuts as regular adaptive icons, use one of the following techniques:

For static shortcuts, use the element. For dynamic shortcuts, call the createWithAdaptiveBitmap() method when you create them.

For more information about implementing adaptive icons, see Implementing Adaptive Icons. For more information about shortcuts, see App shortcuts overview.

Additional resources

See the following resources for additional information about designing and implementing adaptive icons.

Figma community page template Understanding Android Adaptive Icons Designing Adaptive Icons Implementing Adaptive Icons Create app icons in Android Studio Google Play icon design specifications


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

      专题文章
        CopyRight 2018-2019 实验室设备网 版权所有